<template>
  <div class="reset-pwd-cls">
    <el-form ref="pwdRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input
          v-model="form.oldPassword"
          placeholder="请输入旧密码"
          type="password"
          show-password
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          v-model="form.newPassword"
          placeholder="请输入新密码"
          type="password"
          show-password
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          v-model="form.confirmPassword"
          placeholder="请确认密码"
          type="password"
          show-password
        />
      </el-form-item>
      <el-form-item>
        <div class="btn-cls">
          <el-button
            v-hasPerm="['system:user:updateBaseInfo']"
            type="primary"
            @click="handleSubmit(pwdRef)"
            >重置密码</el-button
          >
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
export default {
  name: "resetPwd",
};
</script>
<script setup lang="ts">
import { ref, defineProps } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { updateUserPwd } from "@/api/user";

const router = useRouter();
const props = defineProps({
  user: {
    type: Object,
    default: () => {},
    required: true,
  },
});
interface RuleForm {
  [propName: string]: any;
}
const form = ref<RuleForm>({
  id: -1,
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});

const pwdRef = ref<FormInstance>();

form.value = props.user;

const equalToPassword = (rule, value, callback) => {
  if (form.value.newPassword !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const rules = ref({
  oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
  newPassword: [
    { required: true, message: "新密码不能为空", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "确认密码不能为空", trigger: "blur" },
    { required: true, validator: equalToPassword, trigger: "blur" },
  ],
});

const handleSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;

  formEl.validate(async (valid) => {
    if (valid) {
      let result = await updateUserPwd(form.value);
      let data = result.data;
      if (data.code == 200) {
        form.value.oldPassword = "";
        form.value.newPassword = "";
        form.value.confirmPassword = "";
        ElMessage.success(data.msg);
      } else {
        ElMessage.error(data.msg);
      }
    }
  });
};
</script>


<style lang="less" scoped>
.reset-pwd-cls {
  width: 60%;
  height: 100%;
}
.btn-cls {
  width: 120px;
  button {
    width: 100%;
    height: 100%;
  }
}
</style>